/**
 * Created by brickspert on 2016/12/25.
 */
/*地图页面*/
import React, {
    Component
} from 'react';
import './Map.scss';
import {
    browserHistory
} from 'react-router';

const hertImg = require('./images/hert.png');
const closeImg = require('./images/close.png');
export default class Map extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    componentDidMount() {
        var Inglat = [112.1173697749,27.530598];
        var map = new AMap.Map("map", {
            resizeEnable: true,
            center: Inglat, //地图中心点
            zoom: 15 //地图显示的缩放级别
        });
        map.setMapStyle('amap://styles/fresh');
        var marker = new AMap.Marker({ //添加自定义点标记
            map: map,
            position:Inglat, //基点位置
            offset: new AMap.Pixel(-5, -5), //相对于基点的偏移位置
            draggable: false, //是否可拖动
            content: '<image src=' + hertImg + ' />' //自定义点标记覆盖物内容
        });
        marker.setLabel({ //label默认蓝框白底左上角显示，样式className为：amap-marker-label
            offset: new AMap.Pixel(30, 30), //修改label相对于maker的位置
            content: "亲，快来参加我们的婚礼吧~点这里~"
        });

        AMap.event.addListener(marker, 'click', function () {
            infoWindow.open(map, marker.getPosition());
        });
        // }
        var content='<div class="info-title">檀树塘</div><div class="info-content">' +
        '<img src="http://www.fashaoge.com/wedding/county.jpg">' +
        '穷乡僻壤,您远道而来，大驾光临，蓬荜生辉。附近有双峰四中、国爵公祠<br/>' +
        '<a target="_blank" href = "http://uri.amap.com/marker?position=112.1173697749,27.530598&name=中国檀树塘&src=http://www.fashaoge.com&coordinate=gaode&callnative=1">点击进入导航模式</a></div>';
        var  infoWindow = new AMap.AdvancedInfoWindow({
            content: content,
            placeSearch: false,
            asOrigin: false,
            asDestination: true,
            offset: new AMap.Pixel(0, -30)
        });

    }

    _goBack() {
        browserHistory.goBack(-1);
    }

    render() {
        return (<div className="full-page map-page" >
            <img src={ closeImg}className="close" onClick={ () => this._goBack()}/>
            <div id="map" className="map" > </div> 
            <div className="weather"><span></span></div>
            <a className="toplace" href="http://uri.amap.com/marker?position=112.1173697749,27.530598&name=檀树塘&src=http://www.fashaoge.com&coordinate=gaode&callnative=1" target="parent">
            <img  src="http://www.fashaoge.com/wedding/toplace.png"/></a>
            </div>
    )
  }
}
